<template>
    <div>
        <el-image @click.native="detail" class="img" :src="activeItem.activityThumb	"></el-image>
        <div  class="warp">
            <p class="text-ellipsis-single title" >{{activeItem.activityName}}</p>
            <p class="time">{{activeItem.startTime.split(' ')[0]}} - {{activeItem.endTime.split(' ')[0]}}</p>
            <p class="time"><span class="iconfont icon-didian icon"></span>{{activeItem.activityAddress}}</p>
            <!-- <p class="content-text">已有<span class="">{{activeItem.signUpCount}}</span>人报名</p> -->
                </div>
        <p class="content-text text-ellipsis-Multiline">{{activeItem.content}}</p>
        <el-button class="btn" :disabled="activeItem.joined" round :class="status" @click="signUp">{{statusText}}</el-button>
    </div>
</template>

<script lang="ts">
import router from "/@/router";

    export default {
        props:{
            activeItem:Object,
            activeIndex:Number
        },
        computed:{
            status(){
                switch (this.activeItem.status){
                    case 1: return "btn_1";
                    case 2: return "btn_2";
                    default: return "btn"
                }
            },
            statusText(){
                switch (this.activeItem.status){
                    case 1: return "已报名";
                    case 2: return "已结束";
                    default: return "立即报名"
                }
            }
        },
        methods:{
            signUp(){
                this.$emit('signUp',this.activeIndex)
            },
              detail(){
                router.push({ name: 'activity-activityDetail', query: {activityId: this.activeItem.activityId}} )
            }
        }
    }
</script>

<style lang="scss" scoped>
.img{
    height:160px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
}
.title{
    margin-top: 10px;
    line-height:30px;
    color: #1a1a1a;
}

.time{
    font-size:12px;
    color: #999999;
      line-height:30px
}
.icon{
    font-size:12px;
    color: var(--el-color-primary); //$--color-primary;
    margin-right: 10px;
}
.warp{
    padding:0 20px;
    
}
.content-text{
 font-size:12px;
    color: #808080;
    margin-top: 6px;
}
.content-text span{
    color: #ff5f19;
}
.btn{
    width: 90%;
    height:36px;
    color: #ffffff;
    background:#ff5f19;
    border-radius: 18px;
    display:block;
    margin: 10px auto 0
}
.btn_1{
    color: #ffffff;
    background:#f9cdb2;
}

.btn_2{
    color: #ffffff;
    background:#cccccc;
}
</style>